
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=0,minimum-scale=0.5">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>融盈贷-欢度国庆天天抽奖</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/avalon.js/2.1.3/avalon.min.js"></script>
    <style type="text/css">
        a {
            text-decoration: none;
            color: black;
        }

        * {
            border: none;
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei";
        }

        ul {
            list-style-type: none;
        }

        .pre {
            width: 87%;
            height: 26.7%;
        }
        .content{
            position: relative;
        }
        .pre li {
            box-sizing: border-box;
            border: 1px solid #ffffff;
            border-radius: 5px;
            margin: 1px;
            float: left;
            width: 31.7%;
            height: 81%;
            text-align: center;
        }
        .pre li img{
            /*width: 90%;*/
            height: 80%;
            margin: 5%;
        }
        .pre li.button img{
            width: 100%;
            height: 100%;
            margin: 0;
            background-color: transparent;
        }
        .button img{
            cursor: pointer;

        }
        /*.button img:focus{*/
        /*cursor: pointer;*/
        /*}*/
        .rule{
            font-size: 14px;
            padding: 40px;

        }
        .rule p{
            margin: 10px 0;
        }
        .loop_rolling{
            height: 215px;
            position: relative;
            overflow: hidden;
        }
        .loop_rolling li{
            width: 100%;
            position: absolute;
            border-bottom: 2px solid #F9D75E;
            padding-bottom: 5px;
            line-height: 14px;
        }
        .animate-enter{
            background-color: #ffeb8a;
            transition:background-color 0.2s ease;
            -moz-transition:background-color 0.2s ease; /* Firefox 4 */
            -webkit-transition:background-color 0.2s ease; /* Safari 和 Chrome */
        }
        .animate-enter-active{
            background: #ffffff;
        }
        .animate-leave{
            background: #ffffff;
            transition:background-color 1s ease;
            -moz-transition:background-color 1s ease; /* Firefox 4 */
            -webkit-transition:background-color 1s ease; /* Safari 和 Chrome */
        }
        .animate-leave-active{
            background: #ffeb8a;
        }
        .loop_rolling li span {text-overflow: ellipsis;white-space: nowrap;overflow: hidden}
        .goToback{
            position: fixed;
            bottom: 20px;
            right: 4px;
            background: rgba(0, 0, 0, 0.48);
            padding: 6px;
            z-index: 9999;
            border-radius: 45px;
            font-size: 12px;
            color: #fff;
            height: 36px;
            width: 36px;
            line-height: 23px;
        }
    </style>
<body>
<div :controller="roll" class="bg" style="box-sizing:border-box;background-color: #f9d962;">
    <div class="head">
        <img src="/app/Tpl/blue/images/2016/10m/head.jpg" style="width: 100%;" alt=""/>
    </div>
    <div class="content" style="box-sizing:border-box;z-index: 1;padding-top: 10px">
        <img src="/app/Tpl/blue/images/2016/10m/bg.png" alt="" style="width:100%;position: absolute;top: 0;left: 0;z-index: -1"/>
        <span style="margin-left:15%;font-size: 13px;color: #ffffff">本日已抽奖{{@member_num}}次</span>
        <ul class="pre" style="position: absolute;z-index: 2;left: 8%;top: 11%;">
            <li :for="el in @img" :html="@button(el.id)" :class="el.class_name"></li>
        </ul>
    </div>
    <div style="width: 95%;z-index: 4;position: relative;">
        <img src="/app/Tpl/blue/images/2016/10m/silk.png" alt="" style="width:75%;width: 75%;margin:-10% auto 10px;display: block"/>
        <div style="border-radius: 10px;background-color: #fff1b0;padding: 15px;width: 90%;">
            <ul class="loop_rolling">
                <li :for="(index,el) in @list" :css="{top:index*30+5+'px'}">
                    <span style="display: inline-block;width: 35%;text-align: left;">{{el.user_name}}</span>
                    <span style="display: inline-block;width: 44%;text-align: center;">{{el.name}}</span>
                    <span style="display: inline-block;width: 20%;text-align: right;">{{el.create_time}}</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="rule" style="padding: 40px;color: #3c3c3c;font-size: 12px;">
        <img src="/app/Tpl/blue/images/2016/10m/line.png" alt="" style="width: 100%"/>
        <p>1、活动期间（2016年10月1日—10月7日），融盈贷会员均可消耗融盈币参与抽奖。</p>
        <p>2、每个用户每天可获得10次抽奖机会。</p>
        <p>3、用户每天抽奖所消耗的融盈币随着次数增加而递增。</p>
        <p>消耗融盈币：</p>
        <p>第1-3次分别为300、600、900融盈币；</p>
        <p>第4-6次分别为2000、4000、8000融盈币；</p>
        <p>第7-10次分别为16000、32000、64000、128000融盈币。</p>
        <p>4、用户抽到的红包、加息劵、融盈币，可前往“用户中心”查看。</p>
        <p>5、如有问题或者遗漏请联系融盈贷官网客服QQ。</p>
    </div>

    <div class="goToback" :click="@goback()">返回</div>
</div>


</body>
<script type="text/javascript">
    !function () {
        var width = document.documentElement.clientWidth;
        var height = document.documentElement.clientHeight;
        width = parseInt(width)>750?750:parseInt(width);
        height = parseInt(height);
        $(".bg").css({width: width + 'px'});
        $(".content").css({width: width + 'px', height: width + 'px'});
    }();

    avalon.effect('animate', {});
    var roll = avalon.define({
        $id: 'roll',
        img: {
            1:{id:1,src:'/app/Tpl/blue/images/2016/10m/20.png',class_name:'animate-enter'},
            2:{id:2,src:'/app/Tpl/blue/images/2016/10m/0.5.png',class_name:'animate-enter'},
            3:{id:3,src:'/app/Tpl/blue/images/2016/10m/200.png',class_name:'animate-enter'},
            4:{id:8,src:'/app/Tpl/blue/images/2016/10m/666.png',class_name:'animate-enter'},
            5:{id:9,src:'/app/Tpl/blue/images/2016/10m/button.png',class_name:'button'},
            6:{id:4,src:'/app/Tpl/blue/images/2016/10m/888.png',class_name:'animate-enter'},
            7:{id:7,src:'/app/Tpl/blue/images/2016/10m/800.png',class_name:'animate-enter'},
            8:{id:6,src:'/app/Tpl/blue/images/2016/10m/1.png',class_name:'animate-enter'},
            9:{id:5,src:'/app/Tpl/blue/images/2016/10m/sorry.png',class_name:'animate-enter'}
        },
        index: 1,
        ready_statue: 'init',
        termini: 0,//终点
        msg:'',
        step1:0,//一阶段
        step2:0,//二阶段
        button:function(index){
            if(index >= 9){
                return '<img :attr="{src:el.src}"  :click="@start()"/>' +
                    '<p  :click="@start()" style="margin-top:-35%;width:100%;z-index: 3;font-size: 11px;color: #ffffff;font-weight: 600;text-align: center">{{@show_spend()}}</p>';
            }else{
                return '<img :attr="{src:el.src}" />';
            }
        },
        list:'',
        member_num:0,
        spend: 0,
        show_spend:function(){
            var spend = this.spend;
            if(spend == 9999){
                return '已抽奖10次';
            }else if(spend==0){
                return '-请登录-';
            }else{
                return '消耗'+spend;
            }
        },
        list_roll: function () {
            return setInterval(function () {
                for (var i=0;i<=7;i++){
                    var top = $(".loop_rolling li:eq("+i+")").css("top");
                    top = parseInt(top);
                    if(top>=-30){
                        top -= 1;
                    }else{
                        top += 240;
                    }
                    $(".loop_rolling li:eq("+i+")").css("top",top+"px");
                }
            },50);
        },
        roll_id:'',
        init: function () {
            if(this.ready_statue!='init'){
                return false;
            }
            this.list='';
            clearInterval(this.roll_id);
            $.ajax({
                url:'/lottery-start',
                async:false,
                dataType:'json',
                success: function (data) {
                    roll.list = data.list;
                    roll.member_num = data.member_num;
                    roll.spend = data.spend;
                    roll.msg ='';
                }
            });
            if(this.list.length>=8){
                this.roll_id = this.list_roll();
            }
        },
        ready: function () {
            var re = false;
            $.ajax({
                url:'/lottery-savelottery',
                async:false,
                dataType:'json',
                success:function(data){
                    re = false;
                    switch (data.status){
                        case 0:
                            alert(data.msg);
                            roll.ready_statue = 'init';
                            if(data.url == 2){
                                window.location.href = "/wap/index.php?ctl=login";
                            }
                            break;
                        case 1:
                            roll.termini = data.termini;
                            roll.ready_statue = 'can_start';
                            re = true;
                            roll.msg = data.msg;
                            break;
                        default :break;
                    }
                },
                error:function(e){
                    roll.ready_statue = 'init';
                    alert('网络繁忙');
                    re = true;
                }
            });
            return re;
        },
        start: function () {
            if(this.ready_statue!='init'){
                return false;
            }
            this.ready_statue = 'ready';
            if(!this.ready()){
                return false;
            }
            if(this.ready_statue!='can_start'){
                return false;
            }
            var time = 100;
            this.step1 = setInterval(function () {
                roll.rolling();
                if(roll.index+1>8){
                    roll.index=1;
                }else{
                    roll.index++;
                }
            }, time);
            setTimeout(function () {
                clearInterval(roll.step1);
                roll.step2 = setInterval(function () {
                    if (roll.index != roll.termini) {
                        roll.rolling();
                        if(roll.index+1>8){
                            roll.index=1;
                        }else{
                            roll.index++;
                        }
                    } else {
                        roll.rolling();
                        roll.stop();
                    }
                }, time*2);
            }, time * 3 * 8);
        },
        stop: function () {
            clearInterval(this.step1);
            clearInterval(this.step2);
            setTimeout(function () {
                if(roll.msg!=''){
                    alert(roll.msg);
                }
                roll.ready_statue = 'init';
                roll.init();
            },1000);
        },
        rolling: function () {
            var current_index = this.index;
            var current;
            var prev_index = (this.index-1)<=0?8:this.index-1;
            var prev;
            for(var el in this.img){
                if(this.img[el]['id']==current_index){
                    current=parseInt(el);
                }
                if(this.img[el]['id']==prev_index){
                    prev=parseInt(el);
                }
            }
            if (this.is_start) {
                this.img[current]['class_name']="animate-enter animate-enter-active";
                this.is_start = false;
            } else {
                this.img[current]['class_name']="animate-enter animate-enter-active";
                this.img[prev]['class_name']="animate-leave animate-leave-active";
            }
        },
        goback:function () {
            location.href = "/wap/index.php";
        }
    });
    roll.init();
</script>
</html>
